<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="炎头队长沙福林">
    <title>个人介绍</title>
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <div id="vueApp">
    <!--导航-->
    <header class="header">
        <div class="nav-box">
            <span>{{navName}}</span>
            <ul class="nav">
                <li v-for="item in navUlData">
                    <a :href="item.url" v-bind:class="{ on: item.name==navName}">{{item.name}}</a>
                </li>
            </ul>
        </div>
    </header>
    <!--导航end-->
    <!--banner-->
    <div class="banner">
        欢迎来到沙福林的主页
    </div>
    <!--banner end-->
    <!--个人介绍-->
    <div class="introduce">
        <!--自我介绍-->
        <div class="introduce-tit">
            我的介绍
        </div>
        <div class="introduce-main">
            <div class="l">
                <img src="./img/pic.webp" width="220" />
            </div>
            <div class="r">
                <p>姓名：{{nickName}}</p>
                <p>职业：{{workName}}</p>
                <p>工作经验：{{workAge}}</p>
                <p>位置：{{workAddress}}</p>
            </div>
        </div>
        <!--自我介绍end-->
        <!--教育经历-->
        <div class="introduce-tit">
            教育经历
        </div>
        <template v-for="item in educationalxperience">
            <div class="edu-box">
                <img src="./img/hat.png" width="30" height="26" />
                <div class="r-box">
                    <p class="tit">{{item.schoolName}}</p>
                    <p class="small">{{item.professional}}</p>
                    <div class="time">
                        <span class="icon"></span>
                        {{item.timeFrame[0]}} - {{item.timeFrame[1]}}
                    </div>
                </div>
            </div>
        </template>
        <!--教育经历 end-->
        <!--工作经历-->
        <div class="introduce-tit">
            工作经历
        </div>
        <div class="work-box">
            <template v-for="item in workExperience">
                <div class="work">
                    <img src="./img/work.png" width="26" height="26" />
                    <div class="r-box">
                        <p class="tit">{{item.companyName}}</p>
                        <p class="small">担任{{item.postName}}<br>
                            工作职责：
                        <ol>
                            <li v-for="workContent in item.workContentList">{{workContent}}</li>
                        </ol>
                        </p>
                        <div class="time">
                            <span class="icon"></span>
                            {{item.timeFrame[0]}} - {{item.timeFrame[1]}}
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <!--工作经历end-->
        <!--专业技能-->
        <div class="introduce-tit">
            专业技能
        </div>
        <div class="skill-box">
            <template v-for="item in professionalSkills">
                <div class="skill">
                    <p class="tit">
                        <span>{{item.name}}</span>
                        <span>{{item.progress}}</span>
                    </p>
                    <div class="progress">
                        <div class="progress-in" :style="'width:'+item.progress"></div>
                    </div>
                </div>
            </template>
            <div class="skill">
                <p class="tit">
                    <span>html+css</span>
                    <span>80%</span>
                </p>
                <div class="progress">
                    <div class="progress-in" style="width
                    :80%"></div>
                </div>
            </div>
            <div class="skill">
                <p class="tit">
                    <span>javascript</span>
                    <span>88%</span>
                </p>
                <div class="progress">
                    <div class="progress-in" style="width
                    :88%"></div>
                </div>
            </div>
            <div class="skill">
                <p class="tit">
                    <span>Spring全家桶</span>
                    <span>83%</span>
                </p>
                <div class="progress">
                    <div class="progress-in" style="width
                    :83%"></div>
                </div>
            </div>
            <div class="skill">
                <p class="tit">
                    <span>Docker</span>
                    <span>63%</span>
                </p>
                <div class="progress">
                    <div class="progress-in" style="width
                    :63%"></div>
                </div>
            </div>
            <div class="skill">
                <p class="tit">
                    <span>IDEA</span>
                    <span>89%</span>
                </p>
                <div class="progress">
                    <div class="progress-in" style="width
                    :89%"></div>
                </div>
            </div>
        </div>
        <!--专业技能end-->
        <!--项目经验-->
        <div class="introduce-tit">
            项目经验
        </div>
        <div class="work-box">
            <div class="work">
                <img src="./img/project.png" width="26" height="26" />
                <div class="r-box">
                    <p class="tit">项目1某后台系统开发</p>
                    <p class="small">我是什么角色？(担任项目负责人)<br>使用什么技术机构？(vue3+axios+pinia+vite+nodejs+mysql)<br>这件事情解决了什么问题 /
                        难题 / 痛点?<br>原本是怎样的，我的方案是怎样的，提升了什么?<br>有什么技术挑战?<br>给研发效率、业务价值甚至商业价值带来什么变化</p>
                    <div class="time">
                        <span class="icon"></span>
                        2021.07 - 2022.02
                    </div>
                </div>
            </div>
        </div>
        <div class="work-box">
            <div class="work">
                <img src="./img/project.png" width="26" height="26" />
                <div class="r-box">
                    <p class="tit">项目2某小程序研发</p>
                    <p class="small">我是什么角色？(担任项目负责人)<br>这件事情解决了什么问题 / 难题 /
                        痛点?<br>原本是怎样的，我的方案是怎样的，提升了什么?<br>有什么技术挑战?<br>给研发效率、业务价值甚至商业价值带来什么变化</p>
                    <div class="time">
                        <span class="icon"></span>
                        2020.11 - 2021.08
                    </div>
                </div>
            </div>
        </div>
        <!--项目经验end-->

    </div>
    <!--个人介绍end-->

    <div class="foot-box">
        Copyright © 2022.Company name All rights reserved.
    </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/commons.js"></script>
<script src="js/index.js"></script>
</html>
